<template>
  <div>
    <MyDialog
      v-model:show="importExecleDialog"
      title="导入数据"
      width="50%"
      @close="close()"
      @confirm="importConfirm"
      confirmText="开始导入"
      :disabled="!chooseFileName"
    >
      <div>
        <p>操作步骤:</p>
        <p>
          1.下载
          <span class="downloadText">
            <el-link type="primary" @click="downLoadModel()"
              >《导入明细模板》</el-link
            >
          </span>
        </p>
        <p>
          2.打开下载表，将对应信息填入或粘贴进本表。为保证导入成功，请使用纯文本或数字。
        </p>
        <p>
          3.信息输入完毕并保存后，点击下方&lt;上传文件&gt;按钮选择已保存的excel文档。
        </p>
        <p>4. 点击&lt;开始导入&gt;</p>
      </div>
      <el-button type="primary" plain @click="chooseFile">
        <el-icon><Upload /></el-icon>
        上传文件</el-button
      >
      <span style="margin-left: 20px">附件支持类型：XLSX，最大不能超过10M</span>
      <p>{{ chooseFileName }}</p>
    </MyDialog>
  </div>
</template>

<script setup name="InportFile">
import { saveAs } from "file-saver";
import { ref, watch } from "vue";
const { proxy } = getCurrentInstance();

const file = ref({});
const chooseFileName = ref("");

const emit = defineEmits(["update:importExecleDialog", "getList"]);
const props = defineProps({
  importExecleDialog: {
    type: Boolean,
    default: false,
  },
  fileName: {
    type: String,
  },
  check: {
    default: 1,
  },
});

watch(
  () => props.importExecleDialog,
  (n, o) => {
    file.value = {};
    chooseFileName.value = "";
  }
);

const downLoadModel = () => {
  let prefixUrl = process.env.NODE_ENV === "production" ? "/" : "/";
  // 路径中'/'为根目录，即index.html所在的目录
  let path = prefixUrl + "files/" + props.fileName;
  // 下载下来的文件名
  saveAs(path, props.fileName);
};

//设备导入
const importDevice = async () => {
  try {
    // let res = await eMEquipmentImport(file.value, props.check);
    // return res;
  } catch (error) {
    console.log(error);
  }
};

const chooseFile = () => {
  let input = document.createElement("input");
  input.setAttribute("type", "file");
  input.setAttribute("accept", ".xlsx");
  input.addEventListener("change", (e) => {
    let myfile = e.target.files[0];
    if (!myfile) return;
    chooseFileName.value = myfile.name;
    file.value = myfile;
  });
  input.click();
};

const importConfirm = async () => {
  let res;
  if (props.fileName?.includes("台账")) {
    res = await importDevice();
  }

  if (res.success) {
    if (res.data.successNumber) {
      proxy.$modal.notify({
        title: "导入提示",
        message: `导入成功 ${res.data.successNumber} 条数据`,
        duration: 0,
        type: "success",
      });
    }
    if (res.data.importFileList?.length) {
      proxy.$modal.notify({
        title: "导入提示",
        dangerouslyUseHTMLString: true,
        message: `导入失败 ${res.data.importFileList?.length} 条数据、第 <span style="word-break: break-all;">${res.data.importFileList}</span> 行导入失败`,
        duration: 0,
        type: "error",
      });
    }
  }
  emit("getList");
  file.value = {};
  chooseFileName.value = "";
  close();
  console.log(props.importExecleDialog);
};

const close = () => {
  emit("update:importExecleDialog", false);
};
</script>

<style lang="scss" scoped></style>
